<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <div class="table-responsive">
        <div class="col-sm-12">
            <div class="pt10 text-right">
                <form id="search-form-loginLog" role="form" class="form-inline">
                    <div class="form-group" style="margin-bottom: 10px">
                        <input placeholder="开始时间" id="start" name="startTime" class="laydate-icon form-control layer-date" type="text" th:value="${startTime}">
                    </div>
                    <div class="form-group" style="margin-bottom: 10px">
                        <input placeholder="结束时间" id="end" name="endTime" class="laydate-icon form-control layer-date" type="text" th:value="${endTime}">
                    </div>
                    <button id="search-loginLog" class="btn btn-w-m btn-primary submitIntegralList" type="button" style="margin-bottom: 10px">搜索</button>
                </form>
            </div>
        </div>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th class="text-center">
                    <div class="table-first-id">ID</div>
                </th>
                <th class="text-center" width="16%">帐号名</th>
                <th class="text-center" width="16%">登录ip</th>
                <th class="text-center" width="16%">登录地</th>
                <th class="text-center" width="16%">操作系统</th>
                <th class="text-center" width="16%">用户代理</th>
                <th class="text-center" width="16%">登录时间</th>
            </tr>
            </thead>
        </table>
        <div class="J_V_tabContent table-xScrollWrap">
            <table class="table table-bordered table-hover table-xs-content">
                <tbody>
                    <tr class="jqgfirstrow" role="row">
                        <td role="gridcell" class="text-center">
                            <div class="table-first-id">&nbsp;</div>
                        </td>
                        <td role="gridcell" width="16%"></td>
                        <td role="gridcell" width="16%"></td>
                        <td role="gridcell" width="16%"></td>
                        <td role="gridcell" width="16%"></td>
                        <td role="gridcell" width="16%"></td>
                        <td role="gridcell" width="16%"></td>
                    </tr>
                    <tr th:if="${#lists.isEmpty(dataMap['list'])}">
                        <td colspan="7" class="text-center">
                            <div class="noDataTipsBox">
                                <p><span class="c-4e fs16">亲，还没有数据~~~</span></p>
                            </div>
                        </td>
                    </tr>
                    <tr th:if="!${#lists.isEmpty(dataMap['list'])}" th:each="loginLog:${dataMap['list']}" class="text-center">
                        <td><div class="table-first-id" th:text="${loginLog['id']}"></div></td>
                        <td class="text-center" th:text="${loginLog['sysUser']['username']}"></td>
                        <td class="text-center" th:text="${loginLog['loginIp']}"></td>
                        <td class="text-center" th:text="${#strings.isEmpty(loginLog['address'])?'—': loginLog['address']}"></td>
                        <td class="text-center" th:text="${loginLog['osName']}"></td>
                        <td class="text-center" th:text="${loginLog['userAgent']}"></td>
                        <td class="text-center" th:text="${#strings.substring(loginLog['createTime'],0,16)}"></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- 分页，开始 -->
        <div data-th-replace="layout/adminPage"></div>
        <!-- 分页，结束 -->
    </div>
    <script>
        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD hh:mm',
            istime: true,
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD hh:mm',
            istime: true,
            choose: function (datas) {
                start.max = datas //将结束日的初始值设定为开始日
            }
        };
        laydate(start);
        laydate(end);
    </script>
</html>
